<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    .tab_list li{
      float: left;
      height: 39px;
      line-height: 39px;
      padding: 0 20px;
      text-align: center;
      cursor: pointer;
    }
    ul li{
      list-style: none;
    }

    .tab_list .current{
      background-color: #c81623;
      color: #fff;
    }
    .current{
      display: block;
    }

    .item_info{
      padding: 20px 0 0 20px;
    }
    .item{
      display: none;
    }
  </style>
</head>
<body>
  <div class="tab">
      <div class="tab_list"> 
            <ul>
              <li class="current">商品介绍</li>
              <li>规格与包装</li>
              <li>售后保障</li>
              <li>商品评价 (50000)</li>
              <li>手机社区</li>
            </ul>
      </div>
      <div class="tab_con">
          <div class="item" style="display: block;">商品介绍模块内容</div>
          <div class="item">规格与包装模块内容</div>
          <div class="item">售后保障模块内容</div>
          <div class="item">商品评价(50000) 模块内容</div>
          <div class="item">手机社区</div>
      </div>
  </div>

  <script>
    // 1.上的模块选项卡，点击某一个，当前这一个底色会是红色，其余不变(排他思想) 修改类名的方式
    //获取元素
    var tab_list = document.querySelector('.tab_list');
    var lis = tab_list.querySelectorAll('li');
    var items = document.querySelectorAll('.item')
    // for循环绑定点击事件
    for(var i = 0;i < lis.length; i++){
      //开始给5个小li  设置索引号
      lis[i].setAttribute('index',i)
      lis[i].onclick = function(){
        //干掉所有人
        for(var i =0; i <lis.length ;i++){
          lis[i].className = ''
        }
        //留下自己
        this.className = 'current';
        // 2.下面的显示内容模块
        var index = this.getAttribute('index');
        console.log(index);
        //干掉所有人  让其余的item 这些 div隐藏
        for(var i =0; i<items.length; i++){
          items[i].style.display = 'none';
        }
        //留下我自己  让对应的item 显示出来
        items[index].style.display = 'block'
      }
    }
  </script>
</body>
</html>